import React, {useState} from 'react';
import {Button, Col, Form, Input, Row, Select, Space} from "antd";
const grid={
    xs:24,
    sm:12,
    md:8,
    lg:8,
    xl:6
}
function UseFilter(props) {
    const {
        queryList,
        list=[]
    } = props||{}
    const [form] = Form.useForm();
    const [loading,setLoading] = useState(false);

    const formGenerator=()=>{
        return list.map((item,key)=>{
            if (item.type === "select"){
                return <Col {...grid} key={key}>
                    <Form.Item
                        label={item.label}
                        name={item.name}
                    >
                        <Select
                            allowClear
                            placeholder={item.placeholder || "请选择"}
                            options={item.options}
                        />

                    </Form.Item>
                </Col>
            }
            return <Col {...grid} flex={"flex-end"} key={key}>
                <Form.Item
                    label={item.label}
                    name={item.name}
                >
                    <Input placeholder={item.placeholder || "请输入"}/>
                </Form.Item>
            </Col>
        })
    }
    async function onQuery(){
        setLoading(true)
        const values = await form.getFieldsValue()
        await queryList(values)
        setLoading(false)
    }
    function onCancel(){
        form.resetFields();
        onQuery();
    }
    return {
        FilterDOM:<div>
            <Form
                form={form}
            >
                <Row gutter={[20,20]}>
                    {
                        formGenerator()
                    }
                    <Col {...grid}>
                        <Space>
                            <Button type={"primary"} loading={loading} onClick={onQuery}>查询</Button>
                            <Button onClick={onCancel}>重置</Button>
                        </Space>
                    </Col>
                </Row>

            </Form>
        </div>
    }
}

export default UseFilter;